import React,{useEffect, useState} from 'react'
import axios from 'axios'
import {  Table, message, Button } from 'antd';
import A from './yezhu/A';
export default function  home()  {
const [data,setdata]=useState([])
const [count, setCount] = useState(990)
useEffect(() => {
  // 创建一个定时器，每秒减少 count 的值
  const timer = setInterval(() => {
    setCount(prevCount => prevCount - 1);
  }, 1000);

  // 在组件卸载时清除定时器
  return () => {
    clearInterval(timer);
  };
}, []); // 传入一个空数组作为第二个参数，表示只在组件挂载和卸载时执行一次

// 当倒计时结束时，显示倒计时结束的文本
if (count === 0) {
 message.info("本地区块开始提交到云服务器")
setCount(990)
 
}
if(count===90){
  message.info("获取后台数据，渲染表格中")
  setCount(87)
}


// 本地进行处理然后提交云服务器

//从服务器后端湖区获取数据进行处理然渲染表格中 
  useEffect(()=>{
      const query= async()=>{
      await axios.get("http://170.106.186.229:300/tan/query").then(
       res=>{
        const abc = res.data
           abc.sort((a: { status: string; },b: any)=>{
            if(a.status ==="掉线"){
              return -1;
            }
              if(a.status==="延迟"  || a.status==="新作"){
                  return 1;
              }
                  if(a.status==="正常"){
                      return 0
                  }
           }  )     
        setdata(res.data)
       }
      )
    }
  const abc = setInterval(()=>{
    query()
   
    // },6000)
   },900000)
   return ()=>{
    clearInterval(abc)
   }
  },[])
   
  const colum =[
    {
    title:'名字',
    dataIndex:"name"
    },
    {
      title:'节点状态',
      dataIndex:"status",
      
      },
      {
        title:'电脑提交数据时间',
        dataIndex:"time",
        sorter:((a: any ,b: any )=>a-b)
        
        },
  ]
const ab = ()=>{
  location.reload()
}
 
  return (
    <div>
      <h1>谭宇皓派友节点状态明细表</h1><br></br>
      
      <h2>提交数据倒计时: {count} 秒</h2>
     <Button onClick={ab}>刷新页面</Button>
      
      <Table dataSource={data} columns={colum}></Table>
      <h1>15分钟提交数据, 16分钟获取数据</h1><br></br>
    </div>
  )
}

